<template>

  <div class="container">
      <div class="input-data">
          
          <div>
              <h4>用户名:</h4>
              <input type="text" maxlength="16"  v-model="user_name">
          </div>

          <div>
              <h4>密码:</h4>
              <input type="password" maxlength="16"  v-model="password">
          </div>

      </div>

      <div class="button-group">
          <button class="login" @click="login">登录</button>
          <router-link to="/register">
              <button class="register">注册</button>
          </router-link>
      </div>

      <div class="warning">
          <h2>{{warning}}</h2>
      </div>

  </div>

</template>

<script>
import { constants } from 'crypto';

export default{
    data(){
        return{
            user_name:'',
            password:'',
            warning:''
        }
    },

    created:function(){

    },

    mounted:function(){
        this.$store.commit('setTitle','login');
        this.$store.commit('switchIsOriginPath',true)         
    },

    methods:{


        login(){

            if(this.user_name.length===0){
                this.warning='用户名不能为空';
            }else if(this.password.length===0){
                this.warning='密码不能为空';
            }else if(this.password.length<6){
                this.warning='密码至少6位';
            }else{
                //连接服务器验证
                var msg={
                    user_name:this.user_name,
                    password:this.password
                }
                this.sendMsg(msg)
            }
        },

        sendMsg(msg){
            this.$http.get(this.$store.state.server_home_url+'/login',{params:msg}).then((res) => {
                if(res.body.status==2){
                    this.warning='用户不存在';
                }else if(res.body.status==1){
                    this.warning='密码错误';
                }else{
                    
                    var user_data={
                        user_name:msg.user_name,
                        password:msg.password,
                        user_icon:res.body.icon,
                    };
                    this.$store.commit('setIsLogin',user_data);
                    this.$cookies.set("user_name",msg.user_name);
                    this.$cookies.set("password",msg.password);
                    this.$router.push({path:'/gallery'});
                }
            },(err) => {
                console.log(err);
            })
        
        }


    }

}
</script>


<style lang="scss" scoped>
    .container{

        .input-data{
            margin-top:40%;
            margin-left:10%;            
            div{
                margin-top:20px;

                h4{
                    display: block;
                    margin: 0 0 0 0;               
                }
                input{
                    width: 90%;
                    border: 1px black solid;
                    margin: 0 0 0 0;
                }
            }

        }

        .button-group{
            margin-top:15%;
            margin-left:15%;                
            button{
                width: 100px;
                height: 50px;
                color:white;
                font-size: 20px;
                border-radius: 10px 10px;
            }
            .login{
                background: #009a44;
            }
            .register{
                margin-left:15%;
                background: #00a0ea;
            }
        }

        .warning{
            margin-top:15%;
            text-align: center; 
            color: red;             
        }

    }
</style>